<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--

* Copyright junaoki
-->

<html>
<head>

	<style type="text/css">
		.hoverClassB.hoverClassA {
			background: white;
		}
		.hoverClassB {
			background: blue;
		}
		.image {
			border: 1px solid;
		}

	</style>

	<style>
		#root_div .ui-selecting { background: #FECA40; }
		#root_div .ui-selected { background: #F39814; color: white; }

#selectable1 {   width: 100%; height: 100%;}
#selectable1 div {
    background: #ffc;
    line-height: 25px;
    height: 25px;
    width: 200px;
    border: 1px solid #fcc;
    }
#selectable1 div.ui-selected {
    background: #fcaf3e;
    }
#selectable1 div.ui-selecting {
    background: #8ae234;
    }
		

		#selectable .ui-selecting { background: #FECA40; }
		#selectable .ui-selected { background: #F39814; color: white; }
/*		#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
		#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
		*/
	</style>
	
	<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/base/jquery-ui.css" />
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<!-- <script type="text/javascript" src="callout.js"></script> -->

	<script>
		$(function() {
			$("#root_div").selectable({filter : "img"});
			$("#selectable").selectable();

// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0}; 

// initiate the selectable1 id to be recognized by UI
$("#selectable1").selectable({
        filter: 'div',
});

// declare draggable UI and what we are going to be doing on start
$("#selectable1 div").draggable({
     start: function(ev, ui) {
                selected = $(".ui-selected").each(function() {
                   var el = $(this);
                        el.data("offset", el.offset());
                });

                if( !$(this).hasClass("ui-selected")) $(this).addClass("ui-selected");
                offset = $(this).offset();
        },
        drag: function(ev, ui) {
                var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;

                // take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
                selected.not(this).each(function() {
                     // create the variable for we don't need to keep calling $("this")
                     // el = current element we are on
                     // off = what position was this element at when it was selected, before drag
                     var el = $(this), off = el.data("offset");
                     el.css({top: off.top + dt, left: off.left + dl});
                });
        }
});
		

		});

	</script>


</head>
<body>

	<div id="container" style="background: pink; width: 1000px; height: 250px; ">
		<div id="root_div" class="demo" style="float: left; background: red; width: 400px; height: 200px; overflow: auto;">
			<img id="img1" class="image" src="http://jqueryui.com/images/home-nav-widgets.gif"/>
			<img id="img2" class="image" src="http://jqueryui.com/images/home-nav-themes.gif"/>
			<img id="img3" class="image" src="http://jqueryui.com/images/home-nav-docs.gif"/>
			<img id="img4" class="image" src="http://static.jquery.com/ui/css/../images/logo.gif"/>
			<img id="img5" class="image" src="http://jqueryui.com/images/icon_appendto.png"/>
		</div>

		<div id="drop_div" class="hoverClassB" style="width: 400px; height: 200px; overflow: hidden;"></div>
	</div>

<ol id="selectable">
	<li class="ui-widget-content">Item 1</li>
	<li class="ui-widget-content">Item 2</li>
	<li class="ui-widget-content">Item 3</li>
	<li class="ui-widget-content">Item 4</li>
	<li class="ui-widget-content">Item 5</li>
	<li class="ui-widget-content">Item 6</li>
	<li class="ui-widget-content">Item 7</li>
</ol>
	
<div id="selectable1">
        <div>item 1</div>
        <div>item 2</div>
        <div>item 3</div>
        <div>item 4</div>
</div>



</body>
</html>



